<template>
   <!-- 我们不知道什么时候可以拿到 max 的值 （因为异步） 所以可能出现 undefined 的情况 但总会拿到个max 的值  所以我们可以 -->
   <!-- 使用 watch 来进行监听 监听父组件传递过来的 max 值，不管 watch 会被触发几次  但是最后一次肯定是个合法的 max 数值 -->
   <div class="mui-numbox" data-numbox-min="1">
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" value="1" @change="changeCount" ref="numbox">
		<button class="mui-btn mui-btn-numbox-plus" type="button" disabled="">+</button>
	</div>    
</template>

<script>
import mui from "../../lib/dist/js/mui.min.js";
export default {
    // data() {
    //     return {
    //         count: 1,
    //     }
    // },
    mounted() {
        mui(".mui-numbox").numbox();
    },
    props: ["max"],
    watch: {
        "max": function(newVal,oldVal) {
            mui(".mui-numbox").numbox().setOption('max',newVal);
        }
    },
    methods: {
        changeCount() {
            // this.count = this.$refs.numbox.value;
            this.$emit('changeCount', parseInt(this.$refs.numbox.value));
        }
    }
}
</script>


<style lang="scss" scoped>

</style>
